import _ from "lodash";
import canvasListModule from "@/store/modules/canvas";
import ITextCanvas from "@/interface/canvas/ITextCanvas";

//创建备份canvas
function createCanvas(
  width: number,
  height: number,
  backgroundColor: string
): HTMLCanvasElement {
  const canvas2 = document.createElement("canvas") as HTMLCanvasElement;
  const cxt2 = canvas2.getContext("2d") as CanvasRenderingContext2D;
  canvas2.width = width;
  canvas2.height = height;

  //填充背景色（否则会导致设置的背景色失效）
  cxt2.fillStyle = backgroundColor;
  cxt2.fillRect(0, 0, width, height);

  //解决填充背景色之后内容丢失的bug
  const list = _.cloneDeep(canvasListModule.getcanvasList);
  for (let i = 0; i < list.length; i++) {
    if (list[i].type == "text") {
      const cnt = list[i] as ITextCanvas;

      cxt2.strokeStyle = "red";
      cxt2.strokeText(cnt.text, cnt.x, cnt.y);
    }
  }

  return canvas2;
}

export default createCanvas;
